<template>
  <div>
    <div class="content">
      <section v-if="hasMenu">
        <div class="menu-box">
          <span class="name">{{nowMenuName}}</span>
          <i class="el-icon-delete" @click="delMenu"></i>
        </div>
        <div class="menu-box">
          <div @click="changeNav">
            <i class="el-icon-sort icon-style"></i><span>更换导航</span>
          </div>
          <div>
            <router-link target="_blank" :to="{name: 'menu-list', query: $route.query}">
              <i class="el-icon-edit icon-style"></i><span>编辑导航</span>
            </router-link>
          </div>
        </div>
      </section>
      <section v-else>
        <el-button type="primary"  icon="el-icon-plus" style="width:100%" @click="addMenu">添加菜单</el-button>
      </section>
    </div>
    <choose-menu ref="chooseMenu" :activeMenu="hasAnyMenu" @setCurMenu='receiveMenu'></choose-menu>
  </div>
</template>

<script>
import ChooseMenu from './chooseMenu';
export default {
    name: 'menu-layout',
    props: {
        nowMenuName: {
            type: String,
            default: () => {}
        },
        hasAnyMenu: {

        }
    },
    computed: {
        hasMenu () {
            return typeof this.hasAnyMenu === 'number';
        }
    },
    data () {
        return {
            dialogTableVisible: false
        };
    },
    methods: {
        receiveMenu (data) {
            this.hasMenu = true;
            this.$emit('navMenu', data);
        },
        changeNav () {
            this.$refs.chooseMenu.dialogTableVisible = true;
        },
        delMenu () {
            this.hasMenu = false;
            this.$emit('navMenu', {});
        },
        addMenu () {
            this.$refs.chooseMenu.dialogTableVisible = true;
        }
    },
    mounted () {

    },
    components: {
        ChooseMenu
    }
};
</script>

<style lang='scss' scoped>

.content{
  margin: 10px 20px 10px;
  .menu-box{
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #eef0f2;
    padding: 0 10px;
    .name{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon-style{
      color: #2E60F8;
      margin-right: 5px;
    }
  }
}
</style>
